<template>
  <div class="exercise-container grade-exercise-container">
    <div class="page-header d-flex flex-column align-items-start mb-4">
      <h2 class="page-title">
        班级待批改练习
      </h2>

      <!-- 未加入班级提示 -->
      <div
        v-if="classes.length === 0"
        class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded-md mt-3"
      >
        <p class="mb-0">
          您还没有加入任何班级，请先在系统中加入班级
        </p>
      </div>

      <!-- 班级选择下拉框 -->
      <div
        v-else
        class="w-full mt-3"
      >
        <!-- 标签和选择框容器 -->
        <div class="d-flex align-items-center">
          <label
            for="class-select"
            class="form-label me-2"
          >选择班级</label>
          <select
            id="class-select"
            v-model="selectedClassId"
            class="form-control"
            :disabled="!classes.length"
            @change="fetchExercisesToGrade"
          >
            <option value="">
              请选择班级
            </option>
            <option
              v-for="cls in classes"
              :key="cls.classesId"
              :value="cls.classesId"
            >
              {{ cls.classesName }}
            </option>
          </select>
        </div>
        
        <!-- 选择提示 -->
        <div
          v-if="!selectedClassId"
          class="text-danger mt-1"
        >
          请选择要管理的班级
        </div>
      </div>
    </div>

    <!-- 内容区域（仅当有班级时显示） -->
    <div v-if="classes.length > 0">
      <!-- 加载状态 -->
      <div
        v-if="loading"
        class="loading bg-white p-4 rounded-md shadow text-center"
      >
        <div
          class="spinner-border text-primary"
          role="status"
        >
          <span class="visually-hidden">加载中...</span>
        </div>
        <p class="mt-2 text-sm text-gray-500">
          正在加载班级练习数据...
        </p>
      </div>

      <!-- 错误提示 -->
      <div
        v-else-if="error"
        class="error bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-md mb-4"
      >
        <span>{{ error }}</span>
        <button 
          class="ml-4 btn btn-sm btn-primary" 
          @click="fetchExercisesToGrade"
        >
          重试
        </button>
      </div>

      <!-- 练习列表（仅当有班级且无加载错误时显示） -->
      <div
        v-else
        v-show="!currentExercise"
      >
        <!-- 无数据提示 -->
        <div 
          v-if="exercisesToGrade.length === 0" 
          class="no-data提示 text-center bg-white p-6 rounded-md shadow"
        >
          <i class="fa fa-inbox text-4xl mb-4 text-gray-400" />
          <p class="text-lg text-gray-600">
            暂无待批改的练习
          </p>
          <p class="text-sm text-gray-500 mt-2">
            学生尚未提交该班级的练习
          </p>
        </div>

        <!-- 练习卡片列表 -->
        <div
          v-else
          class="exercise-grid grid gap-4"
        >
          <div 
            v-for="exercise in exercisesToGrade" 
            :key="exercise.exerciseId + '-' + exercise.studentId" 
            class="exercise-card cursor-pointer transition-all"
          >
            <div class="card-body p-4">
              <div class="flex flex-col items-center mb-3">
                <h3 class="card-title text-lg font-medium mb-1">
                  {{ exercise.exerciseName }}
                </h3>
                <p class="text-sm text-gray-500 text-center">
                  学生: {{ exercise.studentName }}
                </p>
              </div>
              
              <p class="card-text text-center">
                总分：{{ exercise.exerciseScore }}分<br>
                当前得分：{{ exercise.studentScore || 0 }}分
              </p>
              
              <div class="mt-4 text-center">
                <button 
                  class="btn btn-primary" 
                  @click="openGradeDetail(exercise)"
                >
                  <i class="fa fa-pencil-alt me-2" /> 开始批改
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 批改详情页 -->
    <GradeExerciseDetail 
      v-if="currentExercise" 
      :exercise-id="currentExercise.exerciseId"
      :student-id="currentExercise.studentId"
      :classes-id="selectedClassId"  
      @close="closeGradeDetail"
      @refresh="fetchExercisesToGrade"
    />
  </div>
</template>

<script>
import { submissionAPI } from '@/api/exercise';
import GradeExerciseDetail from './GradeExerciseDetail.vue';

export default {
  name: 'GradeExercise',
  components: { GradeExerciseDetail },
  props: {
    classes: { 
      type: Array, 
      default: () => [] 
    },
    defaultClassId: { 
      type: String 
    }
  },
  data() {
    return {
      exercisesToGrade: [],
      loading: false,
      error: null,
      currentExercise: null,
      selectedClassId: ''
    };
  },
  mounted() {
    if (this.classes.length > 0) {
      this.selectedClassId = this.defaultClassId || this.classes[0].classesId;
      this.fetchExercisesToGrade();
    }
  },
  methods: {
    async fetchExercisesToGrade() {
      if (!this.selectedClassId || this.classes.length === 0) {
        this.exercisesToGrade = [];  // 清空练习列表
        return;
      }

      this.loading = true;
      this.error = null;
      try {
        const response = await submissionAPI.getClassGrades(this.selectedClassId);
        this.exercisesToGrade = response.data;
      } catch (error) {
        console.error('获取待批改练习失败:', error);
        this.error = '加载待批改练习失败，请检查网络';
      } finally {
        this.loading = false;
      }
    },

    openGradeDetail(exercise) {
      this.currentExercise = {
        exerciseId: exercise.exerciseId,
        studentId: exercise.studentId
      };
    },

    closeGradeDetail() {
      this.currentExercise = null;
    }
  }
};
</script>

<style scoped>
/* 导入公共样式 */
@import '../../assets/css/exercise_css/ExerciseCommon.css';

/* 调整后的page-header样式 */
.page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

/* 班级选择器样式 */
.form-label {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0;
}

.form-control {
  padding: 0.375rem 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  min-width: 200px;
}

/* 卡片样式 */
.grade-exercise-container {
  min-height: calc(100vh - var(--header-height));
}

.exercise-card {
  transition: all 0.3s ease;
}

.exercise-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 无数据提示样式 */
.no-data提示 {
  padding: 2rem;
  border-radius: 0.5rem;
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
</style>